<template>
	<view class="shop">
		<view class="status_bar_h" :style="{
				height: `${statusBarHeight}px`,
				backgroundColor: '#20BF6C',
			}"></view>
		<view class="img_box">
			<!-- <swiper
				style="height: 400rpx"
				circular
				:indicator-dots="false"
				:autoplay="true"
				:interval="2000"
				:duration="500">
				<swiper-item
					v-for="(item, key) in src"
					:key="key">
					<view class=""
						><image
							style="width: 100%; height: 400rpx"
							mode="aspectFill"
							:src="item"></image
					></view>
				</swiper-item>
			</swiper> -->
			<image style="width: 100%; height: 400rpx" mode="aspectFill" :src="src">
			</image>
			<view class="back" @click="back">
				<image src="/static/images/arrow-left.png" mode="widthFix"></image>
				<text>返回</text>
			</view>
		</view>
		<view class="main">
			<view class="title">
				<view class="store">{{ view.store }}</view>
				<view class="info">
					<text>歡迎您：</text>
					<text>{{ view.user.mobile?view.user.mobile:view.user.user.mobile }} |
					</text>
					<text>{{ view.user.mobile?view.user.level === 0 ? '普通會員':'' : view.user.user.level === 0 ? '普通會員' : '' }}
						| </text>
					<text @click="logout">退出</text>
				</view>
			</view>
			<view class="btn_wrap">
				<view class="btn_box" @click="jump('predetermine')">立即預定
				</view>
				<view class="btn_box" @click="jump('ticket')">電子票券</view>
				<view class="btn_box" @click="jump('order')">我的訂單</view>
			</view>
		</view>
	</view>
</template>

<script>
	import useStore from '@/store/index.js';
	import baseURL from '@/utils/baseURL.js';
	export default {
		data() {
			return {
				src: [],
				baseURL,
				isChecked: false,
				disabled: false,
				changeText: '獲取驗證碼',
				form: {},
				statusBarHeight: 0, // 顶部状态栏高度
				bthHeight: 0, // 底部按钮高度
				view: {
					user: {},
					store: '',
				},
				scrollTop: 0,
				old: {
					scrollTop: 0,
				},
				timer: null,
			};
		},
		onLoad() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			// const screenTop = uni.getSystemInfoSync().safeArea.top;
			// const screenBot = uni.getSystemInfoSync().safeArea.bottom;
			this.bthHeight = uni.getSystemInfoSync().screenHeight - (1000 - 40) / 2;
			// console.log('uni.getSystemInfoSync()', uni.getSystemInfoSync());
			// console.log('this.bthHeight', this.bthHeight);
			// console.log('screenTop', screenTop);
			// console.log('screenBot', screenBot);
			const userOptions = JSON.parse(uni.getStorageSync('userOptions'));
			const equipmentOptions = JSON.parse(uni.getStorageSync('equipmentOptions'));
			this.view = {
				user: userOptions,
				store: equipmentOptions.name
			};
			this.setSwiperImg();
			this.countdown();
		},
		onUnload() {
			clearTimeout(this.timer);
		},
		methods: {
			countdown() {
				this.timer = setTimeout(() => {
					// uni.navigateTo({
					// 	url: '/pages/index/index',
					// });
				}, 1000 * 60 * 10);
			},
			clearCountdown() {
				clearTimeout(this.timer);
				this.countdown();
			},
			submit() {
				if (this.isChecked) {
					if (this.checkForm()) {
						const params = {
							user_name: this.form.user_name,
							user_pass: this.form.user_pass,
						};
						login(params)
							.then(res => {
								uni.showToast({
									title: '成功',
									duration: 1000,
								});
							})
							.catch(err => {
								uni.showModal({
									title: '系統提示',
									content: `登录失败，原因${err}`,
								});
							});
					} else {
						uni.showModal({
							title: '系統提示',
							content: '請檢查是否填寫',
						});
					}
				} else {
					uni.showToast({
						title: '请勾选协议',
						duration: 1000,
					});
				}
			},
			checkForm() {
				const {
					user_name,
					user_pass
				} = this.form;
				return user_name && user_pass ? true : false;
			},
			setSwiperImg() {
				const equipmentOptions = JSON.parse(
					uni.getStorageSync('equipmentOptions')
				);
				// console.log('equipmentOptions', equipmentOptions.imagejh);
				// const _src = equipmentOptions.imagejh ?
				// 	equipmentOptions.imagejh.split(',') : [];
				// if (_src.length > 1) {
				// 	this.src = _src.map(item => baseURL + item);
				// } else if (_src.length === 1) {
				// 	this.src = [baseURL + _src[0]];
				// }

				this.src = baseURL + equipmentOptions.image3
			},
			jump(data) {
				let url = '';
				switch (data) {
					case 'register':
						url = '/pages/register/register';
						break;
					case 'codeLogin':
						url = '/pages/menu/menu';
						break;
					case 'scanCode':
						url = '/pages/scanCode/scanCode';
						break;
					case 'logout':
						url = '/pages/index/index';
						break;
					case 'predetermine':
						url = '/pages/predetermine/predetermine';
						break;
					case 'ticket':
						url = '/pages/ticket/ticket';
						break;
					case 'order':
						url = '/pages/order/order'
					default:
				}
				uni.navigateTo({
					url
				});
			},
			logout() {
				uni.removeStorageSync('userOptions');
				this.jump('logout');
			},
			back() {
				this.logout()
			},
		},
	};
</script>

<style lang="scss" scoped>
	.shop {
		height: 100%;

		.img_box {
			// padding: 40rpx 40rpx 0;
			position: relative;

			.back {
				position: fixed;
				left: 10rpx;
				bottom: 30rpx;
				display: flex;
				align-items: center;
				color: #fff;
				background-color: #ff914d;
				padding: 5rpx 10rpx;
				border-radius: 20rpx;

				image {
					width: 50rpx;
					margin-right: 10rpx;
				}
			}
		}

		.main {
			padding: 20rpx 40rpx 0;
			text-align: center;
			color: #39B19D;

			.title {
				padding-bottom: 20rpx;
				font-size: 24rpx;
				display: flex;
				justify-content: space-between;
			}

			.btn_wrap {
				display: flex;
				justify-content: space-around;

				.btn_box {
					width: 140rpx;
					height: 140rpx;
					padding: 10rpx;
					text-align: center;
					line-height: 140rpx;
					border-radius: 10rpx;
					color: #fff;
					background-color: #39B19D;
				}
			}
		}
	}
</style>